<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-计算属性的简写</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        .tips {
            width: 300px;
            padding: 20px;
            line-height: 32px;
            font-size: 26px;
        }
        button {
            outline: none !important;
        }
    </style>
</head>
<body>
    <!-- 
        总结：
            a. 计算属性，更多的场景直接写函数，因为不需要setter
            b. 写成函数之后，依然解析为vm实例的一个属性，所以调用时不需要加括号
     -->
    <div id="demo">
        <div class="container">
            <h3>计算属性的简写</h3>
            <hr>
            <form action="#" class="form-inline">
                <p class="from-group">
                    <button class="btn btn-primary" type="button" @click="num++">
                        点击增加 <span class="badge">{{ num }}</span>
                    </button>
                </p>
                <p class="from-group">
                    <label>
                        <span>姓氏：</span>
                        <input type="text" class="form-control" v-model="firName">
                    </label>
                </p>
                <p class="from-group">
                    <label>
                        <span>名字：</span>
                        <input type="text" class="form-control" v-model="lastName">
                    </label>
                </p>
            </form>

            <p class="bg-success tips">{{ getFullName }}</p>
            <p class="bg-success tips">{{ getFullName }}</p>
            <p class="bg-success tips">{{ getFullName }}</p>
            <p class="bg-success tips">{{ getFullName }}</p>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#demo',
            data: {
                firName: '',
                lastName: '',
                num: 0
            },
            // ***** 计算属性 computed
            computed: {
                // 写法1：给计算属性声明一个对象
                // getFullName: {
                //     get() {
                //         console.log('执行了计算属性')

                        // let s1 = this.firName && this.firName[0].toUpperCase() + this.firName.slice(1)
                        // let s2 = this.lastName && this.lastName[0].toUpperCase() + this.lastName.slice(1)
                        // // 在页面中调用函数，通过返回值给dom填充内容
                        // return s1 + ' - ' + s2
                //     },
                //     // 大部分场景没有那个必要去修改计算属性的值
                //     set(val) {
                //         console.log(val)
                //         this.firName = 'lebrow'
                //         this.lastName = 'james'
                //     }
                // }
                // 当只有一个getter函数的时候，可以直接简写为一个函数
                getFullName() {
                    console.log(10086);

                    let s1 = this.firName && this.firName[0].toUpperCase() + this.firName.slice(1)
                    let s2 = this.lastName && this.lastName[0].toUpperCase() + this.lastName.slice(1)
                        // 在页面中调用函数，通过返回值给dom填充内容
                    return s1 + ' - ' + s2
                }
            }
        })

        console.log(vm)
    </script>
</body>
</html>